<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue实例</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
        <style>
            .message{
                color: red;
            }
            .message1{
                font-size: 60px;
            }
        </style>
    </head>
    <body>
        <div id="myVue">
            <div>{{d}}</div>
        </div>
        <!-- 视图 -->
        <div id="app" style="margin-top: 100px;">
            <blog-post title="八嘎" countent="11111"></blog-post>
            <div id="components-demo">
                <button-counter></button-counter>
                <button-counter></button-counter>
                <button-counter></button-counter>
            </div>
            <p>Original message: "{{ message }}"</p>     
            <p>Computed reversed message: "{{ reversedMessage }}"</p>  
            <p>Computed reversed message content: "{{ reversedMessages }}"</p>
            <div v-html="html"></div>
            <div ref="p">asdf</div>
            <button :disabled="isButtonDisabled">Button</button>
            <form action="http://www.baidu.com" v-on:submit.prevent="onSubmit">   <!-- .prevent阻止跳转 -->
                <input v-on:keyup.49="nameChange" name="name" placeholder="请输入名字" />  
                <input type="submit" name="fffff" />
            </form>
            <ol>
                <li v-for="todo in todos">
                  {{ todo.text }}
                </li>
            </ol>
            <div v-for="item,index in todos" :class="{message:true,message1:active == index}" @click="changeTodo">
                {{index}} {{ item.text }}
            </div>
            <div v-for="(todo,index) in todos" @click="gGo($event,index,todo)">{{todo.text}}</div>

            <div>
                <!-- 点击添加属性 -->
                <p @click="changeTodo">{{message}}</p>
            </div>

        </div>

        <div id="app-2">
            <span v-bind:title="message">
              鼠标悬停几秒钟查看此处动态绑定的提示信息！
            </span>
            <p v-if="seen">现在你看到我了</p>
            <!-- <button v-on:click="counter = counter +1 ">数值为{{counter}}</button> -->
            <button v-on:click="great('提示框')">Great</button>
            <button @click="reverseMessage1">反转</button>
            <div>{{message}}</div>
            <input v-model="message"/>

        </div>

    </body>
</html>

<!-- 脚本 -->
<script>
    let el= document.getElementById('myVue')
    let elHtml = el.innerHTML
    var data ={
        a:1, 
        _d:1,  
        get d(){
            return this._d
        },
        set d(newd){
            ///更新UI
            this._d = newd
            init()  //反复触发更新
        }
    }   
    data.b=2

    Object.defineProperty(data,'c',{
        value:3,
        writable:true,  ///可以修改
        enumerable:false,   
    })
    data.c=4
    console.log(data)
    //枚举
    for(var key in data){
        console.log(key,data[key])
    }
    function init(){
        el.innerHTML = elHtml.replace('{{d}}',data.d)
    }
    init()

    setInterval(function(){
        data.d++
    },2000)
    ///自定义组件实例
    Vue.component('button-counter', {
        data: function () {
            return {
            count: 0
            }
        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })

    Vue.component('blog-post', {
        props: ['title','countent'],
        template: '<div><h3>{{ title }}</h3><div v-html="countent"></div></div>'
    })

    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            html:'<div style="color:red;font-size:28px">Hello</div>Vue',
            isButtonDisabled:true,
            active:1,
            todos: [
                { text: '学习JavaScript' },
                { text: '学习C' },
                { text: '不学了' }
            ]
        },
        computed:{
            reversedMessage(){
                return this.message.split('').reverse().join('')
            },

            reversedMessages(num){
                return this.message.split('').reverse().join('') + num
            }
        },
        methods:{
            onSubmit(event){
                console.log(event)
            },

            nameChange(event){
                console.log(event)
            },

            gGo(event,index,todo){
                console.log(event,index,todo)
            },

            changeTodo(){
                   this.todos.push({text:'继续学啊'}) 
            }
        },
        create(){
            
            this.$nextTick(() =>{
                console.log('create',this.$refs,this.$refs.p)
            })
        },

        mounted(){
            console.log(this.$refs,this.$refs.p)
        }

    })

    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString() + '我是一个span',
            seen: true,
            counter:0,
            active:0,

        },



        /* 函数 */
        methods: {
                reverseMessage1: function(){
                    console.log(this)
                    this.message = this.message.split('').reverse().join('')
                },
                ///alert 相当于消息提示
                great: function(args){
                    alert(this.counter),
                    alert(args)
                },
        }

    })

</script>